<template>
  <collapse-wrap title="云台控制" style="margin-top: 20px">
    <!-- 绘图部分 -->
    <div class="monitor_page-right card_echarts" style="background: #333333">
      <div style="padding: 10px 20px; ">
      </div>
      <el-row style="box-sizing: border-box;">
        <el-col :span="14">
          <ezuikit-video @isCreated="isCreated()" ref="ezuikitVideos"></ezuikit-video>
        </el-col>
        <el-col :span="10" style="text-align: left;box-sizing: border-box;padding-top: 5vw;overflow: hidden">

          <el-row>
            <el-col :span="12">
              <!--          云台控制器-->
              <div class="button-group" >

                <div  v-if="monitorInfoData.indexOf(6)>-1" class="outter-circle">
                  <div class="inner-parts brown" @mousedown="changePTZ(0,1)" @mouseup="changePTZStop(0,1)">
                    <span class="rotate"><img src="./image/icon.png" alt=""></span>
                  </div>
                  <div class="inner-parts silver" @mousedown="changePTZ(3,1)" @mouseup="changePTZStop(0,1)">
                    <span class="rotate"><img src="./image/icon.png" alt=""></span>
                  </div>
                  <div class="inner-parts blue" @mousedown="changePTZ(2,1)" @mouseup="changePTZStop(0,1)">
                    <span class="rotate"><img src="./image/icon.png" alt=""></span>
                  </div>
                  <div class="inner-parts gold" @mousedown="changePTZ(1,1)" @mouseup="changePTZStop(0,1)">
                    <span class="rotate"><img src="./image/icon.png" alt=""></span>
                  </div>
                </div>

              </div>
            </el-col>
            <el-col  :span="12" style="display: block;box-sizing: border-box;">
              <el-row>
                <el-col :span="12">
                  <div v-if="isStart" class="button green" @click="initVideo(12)">
                    <div class="shine"></div>
                    <i class=" iconfont iconbofang icon-size2"></i>
                    开始播放
                  </div>
                  <div v-else class="button red" :class="isStart?'':'isActiveBtn'" @click="stopVideo(12)">
                    <div class="shine"></div>
                    <i class=" iconfont icon24gf-pause2 icon-size2"></i>
                    停止播放
                  </div>
                </el-col>
                <el-col :span="12" v-if="monitorInfoData.indexOf(1)>-1">
                  <div class="button " @click="mirrorVideo(2)">
                    <div class="shine"></div>
                    <i class=" iconfont iconjingtoufanzhuan icon-size2"></i>
                    镜头翻转
                  </div>

                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <div  v-if="monitorInfoData.indexOf(2)>-1" class="button " @click="takePhotoNow(0)">
                    <div class="shine"></div>
                    <i class="el-icon-camera-solid"></i>
                    立即拍照
                  </div>
                </el-col>
                <el-col :span="12">
                  <div v-if="isStartVideo&&monitorInfoData.indexOf(3)>-1" class="button " :class="isActiveBtn==1?'isActiveBtn':''"
                       @click="takeVideoNow(1)">
                    <div class="shine"></div>
                    <i class="el-icon-video-camera-solid"></i>
                    立即录像
                  </div>
                  <div v-else-if="!isStartVideo&&monitorInfoData.indexOf(3)>-1" class="button " :class="isActiveBtn==2?'':'isActiveBtn'" @click="stopVideoNow(2)">
                    <div class="shine"></div>
                    <i class="el-icon-video-camera-solid"></i>
                    停止录像 {{monitorInfo.bindEquipId}}
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <div class="button "  v-if="monitorInfoData.indexOf(4)>-1" @mousedown="changePTZ(8,1)" @mouseup="changePTZStop(8,1)">
                    <div class="shine"></div>
                    <i class="el-icon-zoom-in"></i>
                    放 大
                  </div>

                </el-col>
                <el-col :span="12">
                  <div class="button "  v-if="monitorInfoData.indexOf(4)>-1" @mousedown="changePTZ(9,1)" @mouseup="changePTZStop(9,1)">
                    <div class="shine"></div>
                    <i class="el-icon-zoom-out"></i>
                    缩 小
                  </div>

                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <div class="button "  v-if="monitorInfoData.indexOf(5)>-1" @mousedown="changePTZ(10,1)" @mouseup="changePTZStop(10,1)">
                    <div class="shine"></div>
                    <i class=" iconfont iconyanjing icon-size2"></i>
                    近焦距
                  </div>

                </el-col>
                <el-col :span="12">
                  <div class="button "  v-if="monitorInfoData.indexOf(5)>-1" @mousedown="changePTZ(11,1)" @mouseup="changePTZStop(11,1)">
                    <div class="shine"></div>
                    <i class=" iconfont iconjiaoju icon-size2"></i>
                    远焦距
                  </div>

                </el-col>
              </el-row>


            </el-col>
          </el-row>

        </el-col>

      </el-row>

      <!-- 分页器 -->
    </div>
    <el-dialog
      title="视频播放"
      v-if="playMp4"
      :visible.sync="playMp4"
      :close-on-click-modal="false"
      width="1080px">
      <video id="singleVideo" controls autoplay preload="none" class="video-js vjs-default-skin"></video>
    </el-dialog>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </collapse-wrap>
</template>
<script>

  import CollapseWrap from '@/components/collapse-wrap'
  import constUrl from '@/services/env'
  import 'video.js/dist/video-js.css'
  import 'videojs-contrib-hls'
  import ItemMixins from './item.mixins'

  const timer = 30 * 24 * 3600 * 1000
  import PictureViewer from '@/components/picture-viewer'
  import ezuikitVideo from "@/components/ezuikitVideoOpen";

  export default {
    props: ['monitorInfo'],
    mixins: [ItemMixins],
    components: {PictureViewer, CollapseWrap, ezuikitVideo},
    data() {
      return {
        isStart: true,
        isActiveBtn: 99,
        isStartVideo: true,
        firstVideo: false,//第一次进入视频创建
        constUrl,
        type: 'video/mp4',
        card: {
          checkedCard: [] //选中的返回的数据
        },
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        playMp4: false,
        imgList: [],
        playerOptions: {},
        singlePlayer: null,
        //立即拍照
        takePhoto: {
          action: 0,
          cameraId: "356802050120590",
          channel: 2,
          codec: 0,
          count: 1,
          http_url: "http://8.134.54.223:10000/record/photo/v1/upload",
          msg_type: 4,
          wdr: 0
        }
      }
    },
    computed: {
      monitorInfoData() {
        return this.monitorInfo.cameraControl ? this.monitorInfo.cameraControl : []
      }
    },
    methods: {
      update({activeId}) {
        this.$refs.ezuikitVideos.playerNull()
        this.activeId = activeId

        this.isStart = true
        this.isActiveBtn = 99
        this.isStartVideo = true
        this.firstVideo = false//第一次进入视频创建
      },
      //镜头翻转
      mirrorVideo(num) {
        if (this.isStart) {
          return
        }
        this.$refs.ezuikitVideos.mirror(num)
      },
      //视频创建以后返回的状态
      isCreated(isCreated){
        this.firstVideo = true
      },
      // 播放
      initVideo(num) {
        if (!this.firstVideo) {
          // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
          let type
          if(this.monitorInfoData.indexOf(7)>-1){
            type='voice'
          }else {
            type='security'
          }
          this.$refs.ezuikitVideos.initVideo(this.activeId,type)
        } else {
          this.$refs.ezuikitVideos.play()
        }
        this.isStart = false

      },
      // 暂停
      stopVideo() {

        this.$refs.ezuikitVideos.stop(this.activeId)
        this.isStart = true
      },
      changePTZStop(direction, speed) {
        if (this.isStart) {
          return
        }
        setTimeout(()=>{
          this.isActiveBtn = direction
          this.$refs.ezuikitVideos.PTZStop(direction, speed)
        },200)

      },
      //
      changePTZ(direction, speed) {
        if (this.isStart) {
          return
        }
        this.$refs.ezuikitVideos.PTZstart(direction, speed)
      },
      takePhotoNow(num) {
        if (this.isStart) {
          return
        }
        this.isActiveBtn = num
        this.$refs.ezuikitVideos.capturePicture()
        this.$notify.success({
          title: '提示',
          message: '已拍照，请在本地查看！'
        });
      },
      takeVideoNow(num) {
        if (this.isStart) {
          return
        }
        this.isActiveBtn = num
        this.$refs.ezuikitVideos.startSave()
        this.$notify.success({
          title: '提示',
          message: '开始录像！'
        });
        this.isStartVideo = false
      },
      stopVideoNow(num) {
        if (this.isStart) {
          return
        }
        this.isActiveBtn = num
        this.$refs.ezuikitVideos.stopSave()
        this.$notify.success({
          title: '提示',
          message: '停止录像'
        });
        this.isStartVideo = true

      },
      // 查看大图
      previewImg(index) {
        this.$refs.imageViewer.showViewer(this.tableList.map(x => this.constUrl + x.photoUrl), index)
      },
    },
    mounted() {
      // if (this.$route.query.activeId) {
      //   this.$refs.ezuikitVideos.initVideo(this.$route.query.activeId)
      // }
    }
  }
</script>
<style scoped lang="less">
  @import url('./commom.less');

  // 还需自定义的css
  .card_echarts {
    min-height: 550px;
  }

  .monitor_page-left {
    border: 1px solid #c00003;
  }

  .el-card {
    background: transparent;
  }

  .base_img {
    display: inline-block;
    width: 175px;

    .el-button--text {
      color: black;
    }

    .base_img-item {
      height: 175px;
      cursor: pointer;
    }

    .base_img-name {
      padding: 10px 6px;
    }

    .base_img-time {
      font-size: 12px;
      padding: 0 6px 6px;
      color: #999;

      p {
        margin: 10px 0;
      }
    }
  }

</style>
<!--控制台遥控-->
<style lang="less" scoped>
  .button-group {
    padding-top: 20px;
    width: 100%;
    margin: auto;
    height: 100%;
    overflow: hidden;
    text-align: right;
  }

  .outter-circle {
    position: relative;
    margin-left: 10px;
    width:8vw;
    height: 8vw;
    border-radius: 100%;
    overflow: hidden;
    transform-origin: center;
    transform: rotate(45deg);
    overflow: hidden;
    background: #dcdcdc;
    background: url('./image/bg.jpg') no-repeat center center / 100% 100%;
  }

  .inner-parts {
    float: left;
    width: 4vw;
    height: 4vw;
    line-height: 4vw;
    text-align: center;
    /*margin-top: 50px;*/
    /*box-sizing: border-box;*/
    border: 1px solid white;
    cursor: pointer;
    transition: all .1s;
  }

  .silver {
    /*background-color: silver ;*/

    img {
      transform: rotate(90deg) translatex(15px);
    }
  }

  .silver:hover {
    background: #1990FE;
  }

  .gold {
    /*background-color: gold;*/

    img {
      transform: rotate(-180deg) translatey(-15px);
    }
  }

  .gold:hover {
    background: #1990FE;
  }

  .blue {
    /*background-color: blue;*/

    img {
      transform: rotate(-90deg) translatex(-15px);
    }
  }

  .blue:hover {
    background: #1990FE;
  }

  .brown {
    /*background-color: brown;*/

    img {
      transform: translatey(15px);
    }
  }

  .brown:hover {
    background: #1990FE;
  }

  .inner-circle {
    position: absolute;
    margin-top: 70px;
    margin-left: 70px;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    border-radius: 100%;
    background-color: lightblue;
  }

  .rotate {
    display: inline-block;
    transform: rotate(-45deg);
    img{
      width: 2vw;
    }
  }


</style>
<style scoped>
  /*按钮样式*/
  body {
    font-family: 'museoslab500';
    text-transform: uppercase;
    background: #333;
    font-size: 75%;
    text-align: center;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
  }


  .info a {
    text-decoration: none;
    color: #fff;
    font-size: 15px
  }

  .button {
    min-height: 1.5em;
    display: inline-block;
    padding: 12px 25px;
    box-sizing: border-box;
    width: 10em;
    margin: 40px 5px 5px 0px;
    cursor: pointer;
    opacity: 0.9;

    color: #FFF;
    font-size: 1em;
    letter-spacing: 1px;
    text-shadow: rgba(0, 0, 0, 0.9) 0px 1px 2px;

    background: #434343;
    border: 1px solid #242424;

    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -khtml-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -moz-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -o-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -webkit-transition: all 0.1s linear;
    -khtml-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
  }

  .button:hover {
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -khtml-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -o-box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px, inset rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(0, 0, 0, 0.25) 0px 0px 0px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
  }

  .button:active {
    -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -khtml-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -moz-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    -o-box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
    box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px, inset rgba(255, 255, 255, 0) 0px 1px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 5px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -20px 20px, inset rgba(255, 255, 255, 0.05) 0px 20px 20px;
  }

  .isActiveBtn {
    box-shadow: rgba(255, 255, 255, 0.25) 0px 2px 0px, inset rgba(255, 255, 255, 0) 0px 2px 0px, inset rgba(0, 0, 0, 0.5) 0px 0px 20px, inset rgba(255, 255, 255, 0.03) 0px 20px 0px, inset rgba(0, 0, 0, 0.15) 0px -50px 10px, inset rgba(255, 255, 255, 0.05) 0px 50px 50px;
  }

  .shine {
    display: block;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    padding: 0px 12px;
    top: -12px;
    left: -24px;
    height: 1px;
    -webkit-box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 5px;
    -khtml-box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 5px;
    -moz-box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 5px;
    -o-box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 5px;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 5px;
    -webkit-transition: all 0.3s ease-in-out;
    -khtml-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  .button:hover .shine {
    left: 24px;
  }

  .button:active .shine {
    opacity: 0;
  }

  .isActiveBtn .shine {
    opacity: 0;
  }

  .button.red {
    background: #c70000;
  }

  .button.green {
    background: #0fad00;
  }
</style>
